{% extends 'master/layout.html' %}

{% block css %}
    <style>
        .info-box {
              min-height: 140px;
              margin-bottom: 30px;
              padding: 20px;
              color: white;
            /*
              -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1);
              -moz-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1);
              box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1);
              */
            }
        .info-box:hover{

            border: 2px solid #ddd;
        }
        .default-bg {
          color: #fff;
          background: #337ab7;
          background-color: #337ab7;
        }
        .blue-bg {
              color: #fff;
              background: #57889c;
              background-color: #57889c;
        }
        .brown-bg {
          color: #fff;
          background: #d1b993;
          background-color: #d1b993;
        }
        .gray-bg {
              color: #ddd;
              background: #eee;
              background-color: #eee;
        }
        .green-bg {
              color: #fff;
              background: #26c281;
              background-color: #26c281;
        }
        .twitter-bg{
             color: #fff;
             background: #00aced;
            background-color: #00aced;

        }
        .task-bg{
             color: #fff;
             background: #F2763F;
            background-color: #F2763F;

        }
        .flow-bg{
             color: #fff;
             background: #6f5499;
            background-color: #6f5499;

        }
        .pool-bg {
            color: #fff;
            background: #96B46E;
            background-color: #96B46E;

        }
        .dns-bg{
            color: #fff;
             background: #96C746;
            background-color: #96C746;

        }


        .info-box i {
              display: block;
              height: 100px;
              font-size: 60px;
              line-height: 100px;
              min-width: 80px;
              float: left;
              text-align: center;
              margin-right: 20px;
              padding-right: 20px;
              color: rgba(255, 255, 255, 0.75);
            }
        .info-box .count{
            margin-top: 20px;
            font-size: 30px;
            display: block;
            color: #ffffff !important;
            cursor: pointer;
            text-decoration: none;
        }

        .info-box .title {
          font-size: 10px;
          text-transform: uppercase;
        }

    </style>

{% endblock %}

{% block content %}

    <div class="row" style="margin: 40px 60px;">
        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box default-bg">
                <i class="fa fa-desktop"></i>
                <a class="count" href="/cmdb/lists/">资产</a>
                <div class="title">CMDB</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box blue-bg">
                <i class="fa fa-cog"></i>
                <div class="count">配管</div>
                <div class="title">configuration</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box brown-bg">
                <i class="fa fa-cloud"></i>
                <div class="count">私有云</div>
                <div class="title">OpenStack</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box green-bg">
                <i class="fa fa-eye"></i>
                <div class="count">监控</div>
                <div class="title">Monitor</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box twitter-bg">
                <i class="fa fa-connectdevelop"></i>
                <div class="count">堡垒机</div>
                <div class="title">Bastion</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box task-bg">
                <i class="fa fa-tasks"></i>
                <a class="count" href="/task/index/">任务</a>
                <div class="title">Task</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box dns-bg">
                <i class="fa fa-tasks"></i>
                <a class="count" href="/dns/host/">DNS</a>
                <div class="title">Dynamic DNS</div>
            </div><!--/.info-box-->
        </div><!--/.col-->



        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box pool-bg">
                <i class="fa fa-skyatlas"></i>
                <a class="count" href="/pool/ipaddr/">资源池</a>
                <div class="title">resource pool</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box flow-bg">
                <i class="fa fa-recycle"></i>
                <div class="count">流程</div>
                <div class="title">flow</div>
            </div><!--/.info-box-->
        </div><!--/.col-->

        <div class="col-lg-3 col-sm-4 col-xs-6">
            <div class="info-box gray-bg">
                <i class="fa fa-plus"></i>
                <div class="count">添加</div>
                <div class="title">ADD</div>
            </div><!--/.info-box-->
        </div><!--/.col-->


    </div>
{% endblock %}
